<template>
  <div class="container">
    <el-form :inline="true" :model="search" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="search.userName" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="账号">
        <el-input v-model="search.userAccount" placeholder="请输入账号"></el-input>
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input v-model="search.userTel" placeholder="请输入手机号码"></el-input>
      </el-form-item>
      <!--      <el-form-item label="活动区域">-->
      <!--        <el-select v-model="search.region" placeholder="活动区域">-->
      <!--          <el-option label="区域一" value="shanghai"></el-option>-->
      <!--          <el-option label="区域二" value="beijing"></el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" @click="getList">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- <div class="button">
      <el-button @click="onAdd" type="primary">新增用户</el-button>
    </div> -->
    <el-table
      border
      :data="list"
      style="width: 100%"
      class="table"
    >
      <el-table-column
        prop="userName"
        label="姓名"
        width="100">
      </el-table-column>
      <el-table-column
        prop="userAccount"
        label="账号"
        width="100">
      </el-table-column>
      <el-table-column
        prop="userType"
        label="用户类型"
        :formatter="typeFormat"
        width="100">
      </el-table-column>
      <el-table-column
        prop="userTel"
        label="手机号码"
        width="150">
      </el-table-column>
      <el-table-column
        prop="userEmail"
        label="电子邮箱"
        width="150">
      </el-table-column>
      <el-table-column
        prop="userPlace"
        label="籍贯"
        width="250">
      </el-table-column>
      <el-table-column
        prop="userBirth"
        label="生日"
        width="250"
      :formatter="dateFormat">
      </el-table-column>
      <el-table-column
        prop="userHidden"
        label="状态"
        :formatter="stateFormat">
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="200"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-lock"
            :disabled="scope.row.userHidden == 0 ? false : true"
            @click="freeze(scope.row.userId)"
          >
            冻结
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-unlock"
            :disabled="scope.row.userHidden == 0 ? true : false"
            @click="unlock(scope.row.userId)"
          >解锁
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex; justify-content: flex-end; margin-top: 20px">
      <el-pagination
        v-show="total>0"
        :total="total"
        background
        @current-change="getList"
        :current-page.sync="search.currentPage"
        :page-size.sync="search.size"
        layout="total, prev, pager, next"
      />
    </div>
  </div>
</template>

<script>
import {userFreeze, userList, userUnlock} from '@/api/user'
import moment from "moment";

export default {
  name: 'UserInfo',
  data() {
    return {
      search: {
        userName: '',
        userAccount: '',
        userTel: '',
        currentPage: 1,
        size: 10
      },
      total: 0,
      list: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      userList(this.search).then(res => {
        console.log(res)
        this.list = res.data.list
        this.total = res.data.total
      })
    },
    freeze(id) {
      console.log(id)
      userFreeze({userId: id}).then(res => {
        if (res.data) {
          this.$message({
            message: '冻结成功',
            type: 'success'
          })
          this.getList()
        } else {
          this.$message({
            message: '冻结失败',
            type: 'error'
          })
        }
      })
    },
    unlock(id) {
      userUnlock({userId: id}).then(res => {
        if (res.data) {
          this.$message({
            message: '解锁成功',
            type: 'success'
          })
          this.getList()
        } else {
          this.$message({
            message: '解锁失败',
            type: 'error'
          })
        }
      })
    },
    onAdd() {
      this.$router.push({name: "UserRegister"});
    },
    dateFormat(date){
      return moment(date).format("YYYY年MM月DD日")
    },
    typeFormat (row) {
      if (row.userType == 0) {
        return "管理员"
      } else {
        return "员工"
      }
    },
    stateFormat (row) {
      if (row.userHidden == 0) {
        return "正常"
      } else {
        return "冻结"
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 50px;
  display: flex;
  flex-direction: column;

  .button {
    display: flex;
    justify-content: flex-end;
  }

  .table {
    margin-top: 20px;
  }
}

</style>
